<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建一个动画</title>
    <style>
        .box {
            margin: 0 auto;
            margin-top: 100px;
            width: 200px;
            height: 200px;
            background-color: skyblue;
            animation: myfirst 3s infinite;
        }

        @keyframes myfirst {
            from {
                width: 200px;
                height: 200px;
                background-color: skyblue;
            }

            to {
                width: 400px;
                height: 400px;
                background-color: red;
            }
        }
    </style>
</head>

<body>
    <div>
        <p>动画是通过改变元素的样式给元素添加动画效果，与过度不同的是，动画不需要触发事件，而过度必须要触发事件才能发生。</p>
        <p>简单的用过度，复杂的用动画。</p>
        <p>动画在播放完以后，会回到初识状态。</p>
        <p>如果想要动画不要回到初始状态，可以设置一个 forwards值。</p>
        <p>1、使用 @keyframes 动画名 来创建一个动画。</p>
        <p>2、使用 animation 属性来执行动画。animation：动画名称 动画执行时间 速度速率 延迟开始时间 播放次数 轮流反向播放 保持最后的状态。</p>
        <p>animation: 动画名称 动画完成时间 速度速率 延迟时间 重复次数。动画名称和动画完成时间必须要有，其他都是可选可不选。</p>
        <p>animation-play-state 设置动画的播放还是暂停，paused为暂停，running为播放。</p>
        <p>在百分比的动画中，可以使用百分比给动画添加关键帧，来添加动画的复杂度。</p>
    </div>
    <div class="box"></div>
</body>

</html>